<template>
    <el-container class="order-page panel-block">
      <el-header class="sa-header">
        <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="onChangeStatus">
          <el-tab-pane
            v-for="(sl, key) in statusList"
            :key="sl"
            :label="`${sl.label}${sl.num ? '(' + sl.num + ')' : ''}`"
            :name="key"
          ></el-tab-pane>
        </el-tabs>
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            <span class="left">订单列表</span>
            <search-condition
              :conditionLabel="filterParams.conditionLabel"
              @deleteFilter="deleteFilter"
            ></search-condition>
          </div>
          <div>
            <el-button
              v-auth="'shop.admin.order.order.list'"
              class="sa-button-refresh"
              icon="RefreshRight"
              @click="getData()"
            ></el-button>
            <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
            <el-button
              v-auth="'shop.admin.order.order.export'"
              :loading="exportLoading"
              :disabled="exportLoading"
              @click="onExport('export')"
              >订单导出</el-button
            >
            <el-button
              v-if="filterParams.data.status == 'nosend'"
              v-auth="'shop.admin.order.order.exportdelivery'"
              :loading="exportLoading"
              :disabled="exportLoading"
              @click="onExport('exportDelivery')"
              >导出发货单</el-button
            >
          </div>
        </div>
      </el-header>
      <el-main class="sa-p-0" v-loading="loading">
        <el-table
          height="100%"
          class="sa-table"
          :data="table.data"
          :span-method="arraySpanMethod"
          default-expand-all
          @selection-change="handleSelectionChange"
        >
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column type="expand">
            <template #default="props">
              <el-table
                class="sa-table sa-expand-table"
                :data="props.row.items"
                :span-method="objectSpanMethod"
              >
                <el-table-column width="88"></el-table-column>
                <el-table-column width="304">
                  <template #default="scope">
                    <div class="goods-item sa-flex">
                      <sa-image :url="scope.row.goods_image" size="58" />
                      <div class="right sa-m-l-12">
                        <div class="goods-title sa-flex sa-table-line-1">
                          <span class="goods-id" @click="onOpenGoodsEdit(scope.row.goods_id)"
                            >#{{ scope.row.goods_id }}</span
                          >
                          {{ scope.row.goods_title }}
                        </div>
                        <div class="goods-sku-text">
                          <span v-if="scope.row.goods_sku_text">{{ scope.row.goods_sku_text }}</span>
                        </div>
                        <div class="sa-flex">
                          <span class="goods-price sa-m-r-8">¥{{ scope.row.goods_price }}</span>
                          <span class="goods-num sa-m-r-12">x{{ scope.row.goods_num }}</span>
                          <index-status type="dispatch" :item="scope.row" />
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="140" align="center">
                  <template #default="scope">
                    <index-status type="aftersale" :item="scope.row" @updateList="getData" />
                  </template>
                </el-table-column>
                <el-table-column min-width="92" align="center">
                  <template #default>
                    <sa-user-profile :user="props.row.user" :id="props.row.user_id" mode="col" />
                  </template>
                </el-table-column>
                <el-table-column min-width="168" align="center">
                  <template #default>
                    <div
                      class="address-content sa-flex sa-flex-col sa-col-top"
                      v-if="props.row.address"
                    >
                      <div class="consignee sa-m-b-6">
                        <span>{{ props.row.address.consignee }}</span>
                        <span class="sa-m-l-8">{{ props.row.address.mobile }}</span>
                      </div>
                      <div class="address-name sa-m-b-6">
                        {{ props.row.address.province_name }}/{{ props.row.address.city_name }}/{{
                          props.row.address.district_name
                        }}
                      </div>
                      <div class="address sa-table-line-1">
                        {{ props.row.address.address }}
                      </div>
                    </div>
                    <div v-else>{{ props.row.address_id }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="dispatch_type_text" min-width="168" align="center">
                </el-table-column>
                <el-table-column min-width="160" align="center">
                  <template #default="scope">
                    <div class="sa-flex-col sa-col-center">
                      <div
                        v-if="scope.row.activity_type"
                        class="activity-type-text sa-m-r-4"
                        :class="scope.row.activity_type"
                        >{{ scope.row.activity_type_text }}</div
                      >
                      <div class="sa-flex">
                        ¥{{ scope.row.pay_fee }}
                        <index-status
                          v-if="scope.row.refund_status != 0"
                          type="refund"
                          :item="scope.row"
                        />
                      </div>
                      <template v-if="Number(scope.row.discount_fee)">
                        <el-popover
                          popper-class="discount-fee-popover"
                          placement="top"
                          trigger="hover"
                        >
                          <div class="sa-flex">
                            <div
                              class="promo-type-text"
                              v-for="text in scope.row.promo_types_text"
                              :key="text"
                              >{{ text }}</div
                            >
                          </div>
                          <template #reference>
                            <div>
                              <div v-if="scope.row.promo_types_text?.length > 0" class="discount-fee">
                                (优惠: ¥{{ scope.row.discount_fee }})
                              </div>
                            </div>
                          </template>
                        </el-popover>
                        <div v-if="scope.row.promo_types_text?.length == 0" class="discount-fee">
                          (优惠: -¥{{ scope.row.discount_fee }})
                        </div>
                      </template>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="240">
                  <template #default>
                    <div class="sa-flex">
                      <el-popover
                        v-model:visible="refundPopover[props.$index]"
                        popper-class="refund-popover"
                        placement="top-start"
                        :width="204"
                        trigger="click"
                      >
                        <div class="title sa-flex">
                          <el-icon><QuestionFilled /></el-icon>
                          您同意用户进行申请退款吗？
                        </div>
                        <div class="sa-flex sa-row-right">
                          <el-button
                            v-auth="'shop.admin.order.order.applyrefundrefuse'"
                            class="is-link"
                            size="small"
                            type="info"
                            @click="onApplyRefundRefuse(props.row.id, props.$index)"
                            >拒绝</el-button
                          >
                          <el-button
                            v-auth="'shop.admin.order.order.fullrefund'"
                            size="small"
                            type="danger"
                            @click="onOpenRefund(props.row, props.$index)"
                            >同意</el-button
                          >
                        </div>
                        <template #reference>
                          <div class="apply-refund-wrap">
                            <el-button
                              v-if="props.row.btns?.includes('apply_refund_oper')"
                              class="apply-refund-button sa-m-r-12"
                              type="danger"
                              plain
                            >
                              用户申请退款
                              <el-icon><ArrowRight /></el-icon>
                            </el-button>
                          </div>
                        </template>
                      </el-popover>
                      <el-popover v-model:visible="confirmPopover[props.$index]"
                          popper-class="confirm-popover sa-popper" placement="top-start" :width="204"
                          trigger="click">
                          <div class="title sa-flex">
                              <el-icon>
                                  <question-filled />
                              </el-icon>
                              确认用户是否收货？
                          </div>
                          <div class="sa-flex sa-row-right">
                              <el-button v-auth="'shop.admin.order.order.offlinerefuse'" size="small" type="danger" link
                                  @click="onOfflineRefuse(props.row.id, props.$index)">用户拒收
                              </el-button>
                              <el-button v-auth="'shop.admin.order.order.offlineconfirm'" size="small" type="primary"
                                  @click="onOfflineConfirm(props.row.id, props.$index)">确认收货
                              </el-button>
                          </div>
                          <template #reference>
                              <div class="apply-refund-wrap">
                                  <el-button v-if="props.row.btns?.includes('confirm')"
                                      class="send-button sa-m-r-12" type="primary" plain>
                                      确认收货
                                      <el-icon>
                                          <arrow-right />
                                      </el-icon>
                                  </el-button>
                              </div>
                          </template>
                      </el-popover>
                      <el-button
                        v-if="props.row.btns?.includes('send')"
                        v-auth="'shop.admin.order.order.dispatch'"
                        class="send-button"
                        type="primary"
                        plain
                        @click="onSend(props.row)"
                      >
                        立即发货
                        <el-icon><ArrowRight /></el-icon>
                      </el-button>
                      <el-button
                        v-auth="'shop.admin.order.order.detail'"
                        class="is-link"
                        type="primary"
                        @click="detailRow(props.row.id)"
                        >详情</el-button
                      >
                      <el-button
                        v-auth="'shop.admin.order.order.action'"
                        class="is-link"
                        type="primary"
                        @click="onOpenAction(props.row.id)"
                        >日志</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="40" />
          <el-table-column label="商品信息" width="304">
            <template #default="scope">
              <div class="order-wrap sa-flex">
                <div class="id">#{{ scope.row.id }}</div>
                <div class="order-sn sa-flex">
                  订单号:{{ scope.row.order_sn }}
                  <sa-svg
                    class="copy sa-m-l-4 cursor-pointer"
                    name="sa-copy"
                    @click="useClip(scope.row.order_sn)"
                  ></sa-svg>
                </div>
                <div class="create-time"> 下单时间:{{ scope.row.create_time }} </div>
                <div class="pay-types-text">{{ scope.row.pay_types_text?.join(',') }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="售后状态" min-width="140" align="center"></el-table-column>
          <el-table-column label="下单用户" min-width="92" align="center"></el-table-column>
          <el-table-column label="收货地址" min-width="168" align="center"></el-table-column>
          <el-table-column label="配送方式" min-width="168" align="center"></el-table-column>
          <el-table-column label="支付信息" min-width="160" align="center">
            <template #default="scope">
              <div class="sa-flex sa-row-center">
                <el-popover popper-class="pay-fee-popover sa-popper" placement="top" trigger="hover">
                  <div>
                    <div class="pay-fee-item">
                      <div class="label">商品总价：</div>
                      <div class="content">¥{{ scope.row.goods_amount }}</div>
                    </div>
                    <div class="pay-fee-item">
                      <div class="label">运费价格：</div>
                      <div class="content"> ¥{{ scope.row.dispatch_amount }} </div>
                    </div>
                    <div
                      class="pay-fee-item pay-fee-item-discount"
                      v-if="
                        scope.row.ext && (scope.row.ext.promo_infos || scope.row.coupon_id)
                      "
                    >
                      <div class="label">活动优惠：</div>
                      <div class="content">
                        <div
                          class="pay-fee-item"
                          v-if="Number(scope.row.ext.promo_discounts.full_reduce) > 0"
                        >
                          <div class="label sa-m-r-8">满减</div>
                          <div class="content">
                            -¥{{ scope.row.ext.promo_discounts.full_reduce }}
                          </div>
                        </div>
                        <div
                          class="pay-fee-item"
                          v-if="Number(scope.row.ext.promo_discounts.full_discount) > 0"
                        >
                          <div class="label sa-m-r-8">满折</div>
                          <div class="content">
                            -¥{{ scope.row.ext.promo_discounts.full_discount }}
                          </div>
                        </div>
                        <div
                          class="pay-fee-item"
                          v-if="Number(scope.row.ext.promo_discounts.full_gift) > 0"
                        >
                          <div class="label sa-m-r-8">满赠</div>
                          <div class="content"></div>
                        </div>
                        <div
                          class="pay-fee-item"
                          v-if="Number(scope.row.ext.promo_discounts.free_shipping) > 0"
                        >
                          <div class="label sa-m-r-8">满包邮</div>
                          <div class="content">
                            -¥{{ scope.row.ext.promo_discounts.free_shipping }}
                          </div>
                        </div>
                        <div v-if="scope.row.coupon_id" class="pay-fee-item">
                          <div class="label sa-m-r-8">优惠券</div>
                          <div class="content"> -¥{{ scope.row.coupon_discount_fee }} </div>
                        </div>
                      </div>
                    </div>
                    <div class="pay-fee-item">
                      <div class="label">{{['paid', 'completed'].includes(scope.row.status)?'实付金额':'应付金额'}}：</div>
                      <div class="content sa-flex">
                        ¥{{ scope.row.pay_fee }}
                        <s
                          v-if="scope.row.pay_fee != scope.row.original_pay_fee"
                          class="original-pay-fee sa-m-l-4"
                        >
                          {{ scope.row.original_pay_fee }}
                        </s>
                      </div>
                    </div>
                  </div>
                  <template #reference>
                    <div class="pay-fee-reference">¥{{ scope.row.pay_fee }}</div>
                  </template>
                </el-popover>
                <el-button
                  v-if="scope.row?.btns.includes('change_fee')"
                  class="is-link"
                  type="primary"
                  @click="onChangeFee(scope.row)"
                  >改价</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="240">
            <template #default="scope">
              <index-status :order="scope.row" type="status_code" />
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <sa-view-bar>
        <template #left>
          <sa-batch-handle
            :batchHandleTools="batchHandleTools"
            :selectedLeng="table.selected.length"
            @batchHandle="batchHandle"
          ></sa-batch-handle>
        </template>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  <script>
    export default {
      name: 'shop.admin.order.order',
    };
  </script>
  <script setup>
    import { computed, onMounted, reactive, ref } from 'vue';
    import { api } from '../merchant.service';
    import { useModal, usePagination } from '@/sheep/hooks';
    import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
    import { composeFilter } from '@/sheep/utils';
    import useClip from '@/sheep/utils/clipboard.js';
    import StatusButton from './components/status.vue';
    import IndexStatus from './components/index-status.vue';
    import OrderDispatch from './dispatch.vue';
    import OrderRefund from './refund.vue';
    import OrderFee from './fee.vue';
  
    import { activityStatusStyle } from './status.js';
    import OrderBatchDispatch from './batchDispatch.vue';
    import OrderDetail from './detail.vue';
    import OrderAction from './action.vue';
    import GoodsEdit from '@/app/shop/admin/goods/goods/edit.vue';
    import { useRoute } from 'vue-router';
    import { cloneDeep } from 'lodash';
    const route = useRoute();
  
    // getType
    const statusList = reactive({});
    async function getType() {
      const { data } = await api.order.getType();
      for (var key in data) {
        if (filterParams.tools[key] && key != 'status') {
          filterParams.tools[key].options.data = data[key];
        } else if (key == 'pay_type') {
          filterParams.tools['pay.pay_type'].options.data = data[key];
        } else if (key == 'status') {
          data[key].forEach((s) => {
            statusList[s.type] = { label: s.name, num: 0 };
          });
        }
      }
    }
  
    const filterParams = reactive({
      tools: {
        status: { label: '订单状态', value: route.query.status || 'all' },
        order: {
          type: 'tinputprepend',
          label: '请输入查询内容',
          field: 'order',
          order: {
            field: 'id',
            value: '',
          },
          options: [
            {
              label: '订单ID',
              value: 'id',
            },
            {
              label: '订单编号',
              value: 'order_sn',
            },
            {
              label: '售后单号',
              value: 'aftersale.aftersale_sn',
            },
            {
              label: '支付单号',
              value: 'pay.pay_sn',
            },
            {
              label: '交易流水号',
              value: 'pay.transaction_id',
            },
          ],
        },
        user: {
          type: 'tinputprepend',
          label: '请输入查询内容',
          field: 'user',
          user: {
            field: 'user_id',
            value: '',
          },
          options: [
            {
              label: '用户ID',
              value: 'user_id',
            },
            {
              label: '用户昵称',
              value: 'user.nickname',
            },
            {
              label: '用户手机号',
              value: 'user.mobile',
            },
            {
              label: '收货人',
              value: 'address.consignee',
            },
            {
              label: '收货人手机号',
              value: 'address.mobile',
            },
          ],
        },
        type: {
          type: 'tselect',
          label: '订单类型',
          field: 'type',
          value: '',
          options: {
            data: [],
            props: {
              label: 'name',
              value: 'type',
            },
          },
        },
        platform: {
          type: 'tselect',
          label: '订单来源',
          field: 'platform',
          value: '',
          options: {
            data: [],
            props: {
              label: 'name',
              value: 'type',
            },
          },
        },
        'pay.pay_type': {
          type: 'tselect',
          label: '支付方式',
          field: 'pay.pay_type',
          value: '',
          options: {
            data: [],
            props: {
              label: 'name',
              value: 'type',
            },
          },
        },
        activity_type: {
          type: 'tselect',
          label: '活动类型',
          field: 'activity_type',
          value: '',
          options: {
            data: [],
            props: {
              label: 'name',
              value: 'type',
            },
          },
        },
        promo_types: {
          type: 'tselect',
          label: '促销类型',
          field: 'promo_types',
          value: '',
          options: {
            data: [],
            props: {
              label: 'name',
              value: 'type',
            },
          },
        },
        'item.goods_title': {
          type: 'tinput',
          label: '商品名称',
          field: 'item.goods_title',
          value: '',
        },
        create_time: {
          type: 'tdatetimerange',
          label: '下单时间',
          field: 'create_time',
          value: route.query.create_time || [],
        },
      },
      data: {
        status: route.query.status || 'all',
        order: { field: 'id', value: '' },
        user: { field: 'user_id', value: '' },
        type: '',
        platform: '',
        'pay.pay_type': '',
        activity_type: '',
        promo_types: '',
        'item.goods_title': '',
        create_time: route.query.create_time || [],
      },
      conditionLabel: {},
    });
    const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  
    const loading = ref(true);
  
    // 表格
    const table = reactive({
      data: [],
      order: '',
      sort: '',
      selected: [],
    });
  
    const { pageData } = usePagination();
  
    // 获取数据
    async function getData(page) {
      loading.value = true;
      if (page) pageData.page = page;
      let tempSearch = cloneDeep(filterParams.data);
      let search = composeFilter(tempSearch, {
        order_sn: 'like',
        'aftersale.aftersale_sn': 'like',
        'pay.pay_sn': 'like',
        'pay.transaction_id': 'like',
        'user.nickname': 'like',
        'user.mobile': 'like',
        'address.consignee': 'like',
        'address.mobile': 'like',
        promo_types: 'find_in_set',
        'item.goods_title': 'like',
        create_time: 'range',
      });
      const { error, data } = await api.order.list({
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
      });
      if (error === 0) {
        table.data = data.orders.data;
        pageData.page = data.orders.current_page;
        pageData.list_rows = data.orders.per_page;
        pageData.total = data.orders.total;
        for (var key in statusList) {
          statusList[key].num = data[key];
        }
      }
      loading.value = false;
    }
  
    function onChangeStatus(tab) {
      table.data = [];
      getData(1);
    }
  
    function handleSelectionChange(val) {
      table.selected = val;
    }
  
    // 导出订单/导出发货单
    const exportLoading = ref(false);
    async function onExport(type) {
      exportLoading.value = true;
      let tempSearch = cloneDeep(filterParams.data);
      let search = composeFilter(tempSearch, {
        order_sn: 'like',
        'aftersale.aftersale_sn': 'like',
        'pay.pay_sn': 'like',
        'pay.transaction_id': 'like',
        'user.nickname': 'like',
        'user.mobile': 'like',
        'address.consignee': 'like',
        'address.mobile': 'like',
        promo_types: 'find_in_set',
        'item.goods_title': 'like',
        create_time: 'range',
      });
      await api.order.export(type, { search: search.search });
      exportLoading.value = false;
    }
  
    const batchHandleTools = [
      {
        type: 'all',
        label: '批量发货',
        auth: 'shop.admin.order.order.dispatch',
        buttonType: 'default',
      },
    ];
    function batchHandle() {
      let order_ids = [];
      table.selected.forEach((s) => {
        order_ids.push(s.id);
      });
      useModal(
        OrderBatchDispatch,
        {
          title: '批量发货',
          order_ids,
        },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
  
    function detailRow(id) {
      useModal(
        OrderDetail,
        {
          title: '订单详情',
          type: 'detail',
          id,
        },
        {
          confirm: () => {
            getData();
          },
          close: () => {
            getData();
          },
        },
      );
    }
  
    function onOpenAction(id) {
      useModal(OrderAction, {
        title: '日志',
        id,
      });
    }
  
    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex == 2) {
        return [1, 4];
      } else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 5) {
        return [0, 0];
      }
    };
  
    const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex == 0) {
        return [0, 0];
      }
      if (columnIndex == 1) {
        return [1, 2];
      }
      if (columnIndex == 3 || columnIndex == 4 || columnIndex == 7) {
        if (rowIndex == 0) {
          return {
            rowspan: 200,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    };
  
    function onOpenGoodsEdit(id) {
      useModal(GoodsEdit, {
        title: '商品',
        type: 'edit',
        id: id,
      });
    }
  
    function onSend(row) {
      useModal(
        OrderDispatch,
        {
          title: '订单发货',
          data: row,
        },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
  
    function onChangeFee(row) {
      useModal(
        OrderFee,
        {
          title: '改价',
          class: 'fee-dialog',
          id: row.id,
          pay_fee: row.pay_fee,
        },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
  
    function onOpenRefund(row, index) {
      refundPopover[index] = false;
      useModal(
        OrderRefund,
        {
          title: '全部退款',
          class: 'refund-dialog',
          type: 'order.fullRefund',
          data: {
            id: row.id,
            money: row.pay_fee,
          },
        },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
  
    const refundPopover = reactive({});
    async function onApplyRefundRefuse(id, index) {
      refundPopover[index] = false;
      const { error } = await api.order.applyRefundRefuse(id);
      if (error == 0) {
        getData();
      }
    }
  
    const confirmPopover = reactive({});
    async function onOfflineRefuse(id, index) {
      confirmPopover[index] = false;
      const { error } = await api.order.offlineRefuse(id);
      if (error == 0) {
        getData();
      }
    }
    async function onOfflineConfirm(id, index) {
      confirmPopover[index] = false;
      const { error } = await api.order.offlineConfirm(id);
      if (error == 0) {
        getData();
      }
    }
  
    onMounted(async () => {
      await getType();
      getData();
    });
  </script>
  <style lang="scss" scoped>
    .order-page {
      .el-main {
        :deep() {
          .el-table {
            --el-table-row-hover-bg-color: var(--sa-background-hex-hover);
            .el-table__row {
              background: var(--sa-background-hex-hover);
            }
            .el-table__header-wrapper {
              margin-bottom: 4px;
            }
            .el-table__expanded-cell {
              padding: 0;
              background: var(--sa-background-assist);
            }
          }
          .sa-expand-table {
            --el-table-row-hover-bg-color: var(--el-fill-color-light);
            .el-table__header-wrapper {
              margin-bottom: 0;
            }
            .el-table__row {
              background: var(--el-table-tr-bg-color);
            }
            .el-table__body tr:hover > td.el-table__cell {
              background-color: var(--sa-background-assist) !important;
            }
            .el-table__body tr.hover-row.current-row > td.el-table__cell,
            .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
            .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
            .el-table__body tr.hover-row > td.el-table__cell {
              background-color: var(--sa-background-assist) !important;
            }
          }
        }
  
        .sa-table {
          .apply-refund {
            font-size: 12px;
            font-weight: 400;
            color: #999;
          }
          .order-wrap {
            position: relative;
            line-height: 14px;
            font-size: 12px;
            font-weight: 400;
            color: var(--sa-font);
            & > div {
              margin-right: 24px;
            }
            .id {
              min-width: 80px;
              color: var(--sa-subtitle);
            }
            .order-sn {
              min-width: 228px;
              height: 14px;
              font-size: 12px;
              color: var(--sa-subtitle);
              .copy {
                width: 12px !important;
                height: 12px !important;
              }
            }
            .create-time {
              line-height: 14px;
              font-size: 12px;
              color: var(--sa-subtfont);
            }
            .platform-text {
              min-width: 116px;
            }
            .pay-types-text {
              margin-right: 0;
            }
          }
          .address-content {
            width: 100%;
            display: inline-flex;
            .consignee {
              line-height: 14px;
              color: var(--sa-font);
              font-size: 12px;
              text-align: left;
            }
            .address-name {
              line-height: 16px;
              font-size: 14px;
              color: var(--sa-subtitle);
              text-align: left;
            }
            .address {
              height: 14px;
              line-height: 14px;
              font-size: 12px;
              color: var(--sa-subfont);
            }
          }
        }
        .sa-expand-table {
          :deep() {
            .el-table__header-wrapper {
              display: none;
            }
          }
        }
      }
    }
    .refund-popover,.confirm-popover {
      .title {
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
        margin-bottom: 16px;
        .el-icon {
          font-size: 14px;
          color: #faad14;
          margin-right: 8px;
        }
      }
      .tip {
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-subfont);
      }
    }
    .pay-fee-reference {
      width: fit-content;
      color: var(--t-color-primary);
      border-bottom: 1px dashed var(--t-color-primary);
      cursor: pointer;
    }
    .pay-fee-popover {
      .pay-fee-item {
        line-height: 16px;
        font-size: 12px;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        &.pay-fee-item-discount {
          align-items: flex-start;
        }
        &:last-child {
          margin-bottom: 0;
        }
        .label {
          flex-shrink: 0;
          color: var(--sa-subfont);
        }
        .content {
          color: var(--sa-subtitle);
        }
        .original-pay-fee {
          color: #999;
        }
      }
    }
  
    .goods-item {
      .right {
        flex: 1;
        line-height: 14px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
        .goods-title {
          height: 14px;
          line-height: 14px;
          font-size: 12px;
          font-weight: 500;
          margin-bottom: 4px;
          .goods-id {
            color: var(--t-color-primary);
            cursor: pointer;
          }
        }
        .goods-sku-text {
          height: 14px;
          line-height: 14px;
          margin-bottom: 10px;
        }
        .goods-price {
        }
        .goods-num {
        }
      }
    }
  
    .activity-type-text {
      width: fit-content;
      height: 20px;
      padding: 0 5px;
      border-radius: 2px;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      &.groupon,
      &.groupon_ladder {
        background: var(--t-bg-active);
        color: var(--t-color-primary);
      }
      &.seckill {
        background: rgba(255, 77, 79, 0.16);
        color: #ff4d4f;
      }
    }
  
    .discount-fee {
      line-height: 14px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-font);
      text-decoration-line: underline;
    }
    .discount-fee-popover {
      .promo-type-text {
        width: fit-content;
        height: 20px;
        padding: 0 8px;
        background: rgba(250, 173, 20, 0.16);
        border-radius: 10px;
        font-weight: 400;
        font-size: 12px;
        color: #faad14;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .apply-refund-wrap {
      width: fit-content;
    }
    .apply-refund-button {
      height: 26px;
      border-radius: 13px;
      border: none;
      padding: 0 8px 0 12px;
      --el-button-bg-color: rgba(255, 77, 79, 0.16);
    }
    .send-button {
      height: 26px;
      border-radius: 13px;
      border: none;
      padding: 0 8px 0 12px;
      --el-button-bg-color: var(--t-bg-active);
    }
  </style>
  